<script setup>
import {isTypeEle} from "../../../utils/mutil.js";
import {DFT_ICONS} from "@jzl/icons";

const modelValue = defineModel()
const props = defineProps({
  // istyle: Object,
  eleDef: Object,
  currentItemElCode: [String]
})
</script>

<template>
  <div class="ele-prop-item">
    <el-form
      :model="modelValue"
      label-width="80px"
      label-position="top"
      size="mini"
      v-if="modelValue"
    >
      <el-form-item label="文字" v-if="isTypeEle(eleDef, 'text')">
        <el-input v-model="modelValue.text" type="textarea" :rows="4"></el-input>
      </el-form-item>
      <el-form-item label="图标" v-if="isTypeEle(eleDef, 'icon')">
        <IconPicker v-model="modelValue.icon" theme="mini" />
      </el-form-item>
      <el-form-item label="下划线">
        <el-radio-group v-model="modelValue.hlType">
          <el-radio-button label="none">
            <JIcon :icon="DFT_ICONS.none" />
          </el-radio-button>
          <el-radio-button label="color">
            <JIcon :icon="DFT_ICONS.underline" />
          </el-radio-button>
          <el-radio-button label="svg">
            <JIcon :icon="DFT_ICONS.svg" />
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="下划线高度">
        <el-input-number v-model="modelValue.hlHeight" :min="0"></el-input-number>
      </el-form-item>
      <el-form-item label="下划线颜色">
        <ColorPicker v-model="modelValue.hlColor" size="small" show-alpha />
      </el-form-item>
    </el-form>
  </div>
</template>
